<template>
  <div id="__nuxt">
    <!---->
    <div id="__layout">
      <div>
        <section class="containerIndex">
          <div>
            <div class="class1">
              <hed></hed>
              <div class="swiperContent">
                <div class="layout">
                  <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in photo.slice(0,5)" :key="index" style="height:370px;">
                      <img v-lazy="URL+image" width="100%" height="100%" /> >
                    </van-swipe-item>
                  </van-swipe>
                </div>


              </div>
            </div>
            <div class="collectContent active">
              <div class="unCollect "></div>
            </div>
            <div class="details_t">
              <div class="details_t_box">
                <img src="../../assets/images/right.53f3bca.png" alt="" class="details_t_box_img1" />
              </div>
            </div>
            <div class="det_bot">
              <div class="det_bot1">
                导购专享
              </div>
              <div class="det_bot2">
                购物车
              </div>
              <div class="det_bot3">
                立即购买
              </div>
            </div>
            <div class="rightNowTab det_bot addBg showMyTab">
              <div class="det_bot3 oneOfGo">
                立即购买
              </div>
            </div>
            <div class="rightNowTab det_bot addBg showMyTab">
              <div class="det_bot3 oneOfGo">加入购物车</div>
            </div>
            <div class="det_z1">{{ textDetail.goodsName }}</div>

            <div class="goodsInfo">
              <p class="discount2">{{ textDetail.color[0].discount * 10 }}折</p>
              <p class="none"></p>
              <p class="nowPrice">￥{{ textDetail.color[0].price }}</p>
              <p class="oldPrice">￥{{ textDetail.color[0].originalPrice }}</p>
            </div>
            <div class="det_z3_box">
              <div class="det_z3_1">商品款号:{{ textDetail.color[0].colorCode }}</div>
              <span class="none"></span>
            </div>
            <div class="pickColorAndSize">
              <div class="pickColorAndSizeTit">请选择 颜色分类 尺码</div>
              <img src="../../assets/images/right.53f3bca.png" alt=""
                style="width:7px;height:12px;margin-right:.5rem" />
            </div>
            <div class="pickColorAndSize">
              <div class="pickColorAndSizeTit">查看附近门售店</div>
              <img src="../../assets/images/right.53f3bca.png" alt=""
                style="width:7px;height:12px;margin-right:.5rem" />
            </div>
            <div class="textCenter goodsDetailTitle">
              <div class="borderGray"></div>
              <div>商品详情</div>
              <div class="borderGray"></div>
            </div>
            <img src="../../assets/images/1601259149581.jpg" width="100%" />
            <div>
              <div v-for="(image, index) in photo.slice(0,5)" :key="index">
                <img :src="URL + image" width="100%" style="margin-top:30px" />
              </div>
              <div>
                <table width="100%" border="0" cellspacing="0" cellpadding="0"
                  style="margin-top:40px; text-align: center; font-size:12px;">
                  <tbody>
                    <tr>
                      <td width="243">
                        <img
                          src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150009.jpg"
                          width="100%" />
                      </td>

                      <td width="243">
                        <img
                          src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150113.jpg"
                          width="100%" />
                      </td>

                      <td width="244">
                        <img
                          src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150236.jpg"
                          width="100%" />
                      </td>
                    </tr>
                    <tr>
                      <td width="243" style="padding-top:30px; padding-bottom:10px;">
                        黑色
                      </td>
                      <td width="243" style="padding-top:30px; padding-bottom:10px;">
                        深灰绿
                      </td>
                      <td width="244" style="padding-top:30px; padding-bottom:10px;">
                        海军蓝
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div style="margin-top:50px;">
                  <img src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150332.jpg"
                    width="100%" />
                </div>
                <div style="margin-top:30px;">
                  <img src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150444.jpg"
                    width="100%" />
                </div>
                <div style="margin-top:50px;">
                  <img src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150599.jpg"
                    width="100%" />
                </div>
              </div>
              <div style="margin:0 auto;padding-bottom:20px; margin-top:40px; width: 80%;">
                <div style="font-size:12px;line-height:30px;text-align:center;padding:20px 80px;background:#c7c5ca;">
                  <div style="font-size:12px;margin-bottom:5px;">
                    温馨提示
                  </div>
                  初次水洗有少量落色是正常现象，尽量与其他衣物分开洗涤，洗后轻拧水份，避免衣物变形，请勿暴晒晾干
                </div>
                <div style="text-align:center;margin-top:75px;">
                  <img src="https://cdn.bestseller.com.cn/goodsImagePC/SELECTED/420412022/description/1601259150671.jpg"
                    width="80%" />
                </div>
                <div style="text-align:center;font-size:12px;line-height:14px;margin-top:30px;margin-bottom:20px;">
                  *因不同的计量方法，测量允许1-3cm内误差（CM）
                </div>
                单件尺码
                <Table></Table>
                两件套尺码
              </div>
              <!---->
              <div class="iframeDiv">
                <img src="https://cdn.bestseller.com.cn/assets/h5/SELECTED/image/markWashing.jpg" alt=""
                  style="width:90%;display:inline-block;margin-left:5%" />
              </div>

              <div class="LICK">
                <h3>— 猜你喜欢 —</h3>
                <ul class="LICK_ul" style="width:100%;display:inline-block">
                  <li v-for="(itm, idx) in imgs" :key="idx">
                    <a href="" v-if="itm.setList">
                      <img :src="'https://m.selected.com.cn' + itm.setList[0].picurl" style="width: 100%;" />
                    </a>

                    <h4 style="overflow: hidden; width: 100%; height: 18px;font-size:12px">
                      {{ itm.goodsName }}
                    </h4>
                    <h4 style="font-size:13px;">
                      <span>￥{{ itm.price }}</span>
                    </h4>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!---->
        </section>
      </div>
    </div>
  </div>
</template>

<script>
  import Hed from "../../components/Hed";
  import axios from "axios";
  import {
    goodsDetail,
    goodsEnjoy
  } from "@/api/goodsDetail";
  import Vue from 'vue';
  import {
    Lazyload
  } from 'vant';
  import Table from './Table'
  Vue.use(Lazyload);

  export default {
    components: {
      Hed,
      Table
    },
    data() {
      return {
        detail: null,
        photo: [],
        textDetail: null,
        URL: "https://m.selected.com.cn",
        imgs: [],
        URL1: "https://cdn.bestseller.com.cn",
      };
    },
    async created() {
      // 商品详情
      // console.log(this.$router.apps[0]._route);
      console.log(this.$router.apps[0]._route);
      let goodsCode = this.$router.apps[0]._route.params.goodsCode
      let res = await goodsDetail(goodsCode);
      this.photo = res.data.data.color[0].picurls
      this.textDetail = res.data.data
      console.log(res.data.data);
      // this.goodsList = res.data.data
      //----------------------
      // 猜你喜欢
      let resEnjoy = await goodsEnjoy();
      // console.log(resEnjoy.data.data);
      this.imgs = resEnjoy.data.data

      // this.goodsList = res.data.data
      console.log(this.imgs);
    },
  };
</script>

<style lang="scss" scoped>
  @import url(../../assets/css/slideshow.css);
  @import url(../../assets/css/details.css);
  @import url(../../assets/css/default.css);

  .banner ul:first-child {
    width: 600%;
    transform: translateX(-2%);
  }

  .goodsInfo {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    width: 54%;
  }

  .collectContent.active {
    background: red;
  }
</style>